<template>
	<view class="page">
		<up-navbar title="我的订单" :autoBack="true" safeAreaInsetTop placeholder> </up-navbar>

		<view style="background-color: #fff;    height: 100rpx; ">
			<view style="width: 95%; margin: 0 auto;">
				<!-- :activeStyle="{ width: '33%', height: '44px' }" -->
				<up-tabs :list="list1" @change="tabsChange" :scrollable='false' lineColor="#FF7F00"></up-tabs>

			</view>
		</view>

		<view style=" margin-bottom: 20rpx;">
			<view class="biejings"  v-for="(item, index) in list" :key="index" @click="xiangqing(item.id,item.service_id)">
				<view class="bjsi" >
					<view  class="xiadsj" >
						<up-icon name="clock"></up-icon>
						<view><text>下单时间：{{item.createtime}}</text></view>
					</view>
				</view>
				<view class="minjs_sf" >
					<view style=" display: flex;  ">
						<view style="width: 100%; display: flex;height: 150rpx;">
							<view class="neirngssf">
								<image class="icon1" :src="item.service_imgs" alt="" />
							</view>
							<view class="neirngs" style="width: 39%;">
								<view style="line-height: 87rpx;"><text>{{item.nickname}}</text></view>
								<view><text style="color: #999999;">{{item.mobile}}</text></view>
							</view>
							<view class="neirngss   flex-end" style="align-items: center;"@click.stop="bianjizil">
								<view class="jxzf" >
									<text style="color: #fff; padding: 10rpx;">{{item.status_name}}</text>
								</view>
								<!-- <view class="jxzf_ywc" >
									<text style="color: #fff; padding: 10rpx;">已完成</text>
								</view> -->
							</view>
						</view>
			
			
					</view>
					<view  class="biank" >
					<view class=" flex-end jigsf" >
						<view>
							<text>交易金额：</text> <text style="color: #FF7139;">¥{{item.order_money}}</text>
						</view>
					</view>
					</view>
				</view>
			
			</view>
		</view>

	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		data() {
			return {
				DataList: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list1: [{
						name: '全部',
						id:'all'
					},
					{
						name: '咨询中',
						id:'0'
					},
					{
						name: '已成交',
						id:'1'
					},
					{
						name: '已结束',
						id:'2'
					},
				],
				list:[],
				page:1,
				limit:10.,
				status:'all',
				type:'',
			}
		},
		onShow() {
			this.page=1
			this.fenhong()
		},
		methods: {
			tabsChange(index) {
				console.log(index)
				this.status=index.id
				this.fenhong()
			},
			fenhong(){
					var insg = uni.getStorageSync('userinfo')
					console.log(request)
					console.log(insg,'1111')
					this.$request({
						url: '/api/User/getMyOrderLists',
						header:"application/x-www-form-urlencoded",
						data: {							
							type:insg.user_type,
							page: this.page,
							limit: this.limit,	
							status:this.status,
						}
					}).then(res => {
						if (res.code == 1) {
							console.log(res)
							res.data.forEach((item, index) => {
								item.service_imgs=request+item.service_img
							});	
							this.list=res.data
						} else {
							
						
						}
					})
				
			},
			xiangqing(id,serviceId ){
				uni.navigateTo({
				        url: `/pages/my/dingdan/dingdan_xiangqing/dingdan_xiangqing?id=${id}&serviceId=${serviceId}`
				      });
			},
			onReachBottom() {
				console.log(111)
				var insg = uni.getStorageSync('userinfo')
				var that = this
				uni.showLoading({
					title: '加载中...',
					mask: true //遮蔽层
				})
				console.log(1231123);
				that.page += 1;				
				this.$request({
					url: '/api/User/getMyOrderLists',
					header: "application/x-www-form-urlencoded",
					data: {
						type: insg.user_type,
						page: that.page,
						limit: that.limit,
					}
				}).then(res => {
					if (res.code == 1) {
						var feilei_neirong = res.data;
						console.log(res)
						if (feilei_neirong.length != 0) {
			
							feilei_neirong.forEach(rect => {
			
								that.list.push(rect);
							});
							console.log(that.list = that.list)
			
						
							uni.hideLoading()
						} else {
							uni.showToast({
								title: '没有更多的数据了',
								icon: 'none',
								duration: 2000
							});
						}
						// res.data.forEach((item, index) => {
						// 	item.avatars=request+item.avatar
						// });	
						// this.list=res.data
					} else {
			
			
					}
				})
			},
		},
		onReachBottom() {
			this.onReachBottom()
		},
	}
</script>

<style lang="scss" scoped>
	.biejings{
		width: 90%; margin: 0 auto;  margin-top: 20rpx;
	}
	.jigsf{
		height: 80rpx;  line-height: 80rpx;
	}
	.biank{
		border-top: 1rpx dashed #eee ; width: 90%; margin: 0 auto;
	}
	.jxzf{
		display: flex;align-items: center;justify-content: center;  background-color: #FF7139; border-radius: 50rpx 0rpx 0rpx 50rpx;
	}
	.jxzf_ywc{
		display: flex;align-items: center;justify-content: center;  background-color: #999999; border-radius: 50rpx 0rpx 0rpx 50rpx;
	}
	.minjs_sf{
		background-color: #fff;  border-radius:  0rpx 0rpx 20rpx 20rpx;
	}
	.xiadsj{
		width: 90%; margin: 0 auto; display: flex;  line-height: 80rpx;
	}
	.bjsi{
		background-color: #EFEFEF; height: 80rpx; border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.page {
		background: #F8F8F8;
	}

	.neirngssf {
		width: 20%;
		padding: 10rpx;
		margin-left: 30rpx;

	}
	.flex-end{
		display: flex; justify-content: flex-end;
	}
.neirngss{
		width: 30%;	
}
	.neirngs {
		width: 36%;
		padding: 10rpx;



	}

	.icon1 {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;

	}
</style>